<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import IconSvg from "@/components/IconSvg/Index.vue";

const router = useRouter()
const route = useRoute()

// 用户信息
const userInfo = ref({
  name: '管理员',
  avatar: ''
})

// 侧边栏菜单
const menuItems = ref([
  {
    id: '1',
    title: '首页',
    icon: 'dashboard',
    path: '/',
    closable: false
  },
  {
    id: '2',
    title: '用户管理',
    icon: 'user',
    children: [
      { id: '2-1', title: '用户列表', path: '/users/list', closable: true },
      { id: '2-2', title: '角色管理', path: '/users/roles', closable: true },
      { id: '2-3', title: '权限管理', path: '/users/permissions', closable: true }
    ]
  },
  {
    id: '3',
    title: '系统设置',
    icon: 'setting',
    children: [
      { id: '3-1', title: '基本设置', path: '/system/basic', closable: true },
      { id: '3-2', title: '安全设置', path: '/system/security', closable: true },
      { id: '3-3', title: '日志管理', path: '/system/logs', closable: true }
    ]
  },
  {
    id: '4',
    title: '数据统计',
    icon: 'chart',
    path: '/statistics',
    closable: true
  }
])

// 标签页数据
const tabs = ref([
  { title: '首页', path: '/', closable: false }
])

// 当前激活的标签页
const activeTab = ref('/')

// 通知数量
const notificationCount = ref(3)

// 退出登录
const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 执行退出登录逻辑
    router.push('/login')
  })
}

// 切换侧边栏展开状态
const isCollapse = ref(false)

// 处理菜单点击
const handleMenuSelect = (path: string) => {
  if (path) {
    // 查找菜单项信息
    const menuItem = findMenuItem(path)
    if (menuItem) {
      // 添加标签页（如果不存在）
      const existingTab = tabs.value.find(tab => tab.path === path)
      if (!existingTab) {
        tabs.value.push({
          title: menuItem.title,
          path: menuItem.path,
          closable: menuItem.closable !== false
        })
      }
      
      // 激活标签页
      activeTab.value = path
      // 路由跳转
      router.push(path)
    }
  }
}

// 递归查找菜单项
const findMenuItem = (path: string): any => {
  for (const item of menuItems.value) {
    if (item.path === path) {
      return item
    }
    if (item.children) {
      for (const child of item.children) {
        if (child.path === path) {
          return child
        }
      }
    }
  }
  return null
}

// 处理标签页切换
const handleTabClick = (tab: any) => {
  activeTab.value = tab.props.name
  router.push(tab.props.name)
}

// 处理标签页关闭
const handleTabRemove = (targetPath: string) => {
  // 不允许关闭首页
  if (targetPath === '/') {
    return
  }
  
  const tabIndex = tabs.value.findIndex(tab => tab.path === targetPath)
  if (tabIndex !== -1) {
    tabs.value.splice(tabIndex, 1)
    
    // 如果关闭的是当前激活的标签页，切换到上一个标签页或首页
    if (activeTab.value === targetPath) {
      if (tabs.value.length > 0) {
        const newActiveTab = tabIndex > 0 ? tabs.value[tabIndex - 1] : tabs.value[0]
        activeTab.value = newActiveTab.path
        router.push(newActiveTab.path)
      } else {
        // 如果没有其他标签页，回到首页
        activeTab.value = '/'
        router.push('/')
      }
    }
  }
}

// 监听路由变化，同步标签页
watch(() => route.path, (newPath) => {
  activeTab.value = newPath
  // 如果新路径不在标签页中，添加它
  const existingTab = tabs.value.find(tab => tab.path === newPath)
  if (!existingTab) {
    const menuItem = findMenuItem(newPath)
    if (menuItem) {
      tabs.value.push({
        title: menuItem.title,
        path: menuItem.path,
        closable: menuItem.closable !== false
      })
    }
  }
})

// 特殊处理基本设置菜单项的点击
const handleBasicSettingClick = () => {
  const path = '/system/basic'
  const menuItem = findMenuItem(path)
  if (menuItem) {
    // 添加标签页（如果不存在）
    const existingTab = tabs.value.find(tab => tab.path === path)
    if (!existingTab) {
      tabs.value.push({
        title: menuItem.title,
        path: menuItem.path,
        closable: menuItem.closable !== false
      })
    }
    
    // 激活标签页
    activeTab.value = path
    // 路由跳转
    router.push(path)
  }
}

onMounted(() => {
  // 初始化当前路由
  activeTab.value = route.path
})
</script>

<template>
  <div class="admin-layout">
    <el-container class="admin-container">
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '220px'" class="sidebar">
        <div class="sidebar-header">
          <div v-if="!isCollapse" class="logo">
            <IconSvg name="logo" class="logo-icon"/>
            <span class="logo-text">管理系统</span>
          </div>
          <div v-else class="logo-collapsed">
            <IconSvg name="logo" class="logo-icon"/>
          </div>
        </div>
        
        <el-menu
          :default-active="activeTab"
          class="sidebar-menu"
          :collapse="isCollapse"
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409eff"
          :collapse-transition="false"
          @select="handleMenuSelect"
        >
          <div v-for="item in menuItems" :key="item.id">
            <el-menu-item 
              v-if="!item.children" 
              :index="item.path"
              class="menu-item"
            >
              <IconSvg :name="item.icon" class="menu-icon"/>
              <template #title>{{ item.title }}</template>
            </el-menu-item>
            
            <el-sub-menu v-else :index="item.id" class="submenu">
              <template #title>
                <IconSvg :name="item.icon" class="menu-icon"/>
                <span>{{ item.title }}</span>
              </template>
              <el-menu-item 
                v-for="subItem in item.children" 
                :key="subItem.id" 
                :index="subItem.path"
                class="submenu-item"
                @click="subItem.path === '/system/basic' ? handleBasicSettingClick() : null"
              >
                {{ subItem.title }}
              </el-menu-item>
            </el-sub-menu>
          </div>
        </el-menu>
      </el-aside>

      <!-- 主体区域 -->
      <el-container>
        <!-- 头部 -->
        <el-header class="admin-header">
          <div class="header-left">
            <el-button 
              class="menu-toggle" 
              @click="isCollapse = !isCollapse" 
              circle
            >
              <IconSvg :name="isCollapse ? 'expand' : 'collapse'" class="toggle-icon"/>
            </el-button>
          </div>
          
          <div class="header-right">
            <el-badge :value="notificationCount" class="notification-badge">
              <el-button class="icon-button" type="text">
                <IconSvg name="notification" class="header-icon"/>
              </el-button>
            </el-badge>
            
            <el-dropdown>
              <div class="user-info">
                <el-avatar :size="32" class="user-avatar">
                  <IconSvg name="user" class="avatar-icon"/>
                </el-avatar>
                <span class="user-name">{{ userInfo.name }}</span>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <IconSvg name="user" class="dropdown-icon"/>
                    个人中心
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <IconSvg name="setting" class="dropdown-icon"/>
                    设置
                  </el-dropdown-item>
                  <el-dropdown-item divided @click="handleLogout">
                    <IconSvg name="logout" class="dropdown-icon"/>
                    退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 标签页 -->
        <div class="tabs-container">
          <el-tabs
            v-model="activeTab"
            type="card"
            closable
            @tab-click="handleTabClick"
            @tab-remove="handleTabRemove"
            class="admin-tabs"
          >
            <el-tab-pane
              v-for="tab in tabs"
              :key="tab.path"
              :label="tab.title"
              :name="tab.path"
              :closable="tab.closable"
            >
            </el-tab-pane>
          </el-tabs>
        </div>

        <!-- 主内容区 -->
        <el-main class="admin-main">
          <div class="main-content">
            <!-- 首页内容 -->
            <div v-if="activeTab === '/'" class="content-placeholder">
              <el-card class="welcome-card">
                <div class="welcome-header">
                  <IconSvg name="dashboard" class="welcome-icon"/>
                  <h2>欢迎使用qa信息管理系统</h2>
                </div>
                <p class="welcome-text">请选择左侧菜单开始操作</p>
                
                <div class="stats-grid">
                  <el-card class="stat-card">
                    <div class="stat-content">
                      <div class="stat-icon bg-blue">
                        <IconSvg name="user" class="stat-icon-inner"/>
                      </div>
                      <div class="stat-info">
                        <div class="stat-number">1,234</div>
                        <div class="stat-label">用户总数</div>
                      </div>
                    </div>
                  </el-card>
                  
                  <el-card class="stat-card">
                    <div class="stat-content">
                      <div class="stat-icon bg-green">
                        <IconSvg name="order" class="stat-icon-inner"/>
                      </div>
                      <div class="stat-info">
                        <div class="stat-number">56</div>
                        <div class="stat-label">今日订单</div>
                      </div>
                    </div>
                  </el-card>
                  
                  <el-card class="stat-card">
                    <div class="stat-content">
                      <div class="stat-icon bg-orange">
                        <IconSvg name="revenue" class="stat-icon-inner"/>
                      </div>
                      <div class="stat-info">
                        <div class="stat-number">¥24,560</div>
                        <div class="stat-label">今日收入</div>
                      </div>
                    </div>
                  </el-card>
                  
                  <el-card class="stat-card">
                    <div class="stat-content">
                      <div class="stat-icon bg-purple">
                        <IconSvg name="visit" class="stat-icon-inner"/>
                      </div>
                      <div class="stat-info">
                        <div class="stat-number">1,890</div>
                        <div class="stat-label">今日访问</div>
                      </div>
                    </div>
                  </el-card>
                </div>
              </el-card>
            </div>
            
            <!-- 基本设置页面 -->
            <div v-else-if="activeTab === '/system/basic'" class="page-content">
              <el-card class="page-card">
                <div class="page-header">
                  <h3>基本设置</h3>
                </div>
                <div class="page-body">
                  <p>这里是基本设置页面的内容。</p>
                  <el-form label-width="120px" class="setting-form">
                    <el-form-item label="系统名称">
                      <el-input placeholder="请输入系统名称"></el-input>
                    </el-form-item>
                    <el-form-item label="系统描述">
                      <el-input type="textarea" placeholder="请输入系统描述"></el-input>
                    </el-form-item>
                    <el-form-item label="联系邮箱">
                      <el-input placeholder="请输入联系邮箱"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary">保存设置</el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </el-card>
            </div>
            
            <!-- 其他页面内容占位符 -->
            <div v-else class="page-content">
              <el-card class="page-card">
                <div class="page-header">
                  <h3>{{ tabs.find(tab => tab.path === activeTab)?.title }}</h3>
                </div>
                <div class="page-body">
                  <p>页面内容区域 - {{ activeTab }}</p>
                  <p>这里是页面的具体内容，根据路由动态加载对应组件。</p>
                </div>
              </el-card>
            </div>
          </div>
        </el-main>

        <!-- 底部 -->
        <el-footer class="admin-footer">
          <div class="footer-content">
            <p>© 2025 qa信息管理系统. All Rights Reserved.</p>
          </div>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>
.admin-layout {
  height: 100vh;
  
  .admin-container {
    height: 100%;
    
    // 侧边栏样式
    .sidebar {
      background-color: #304156;
      transition: width 0.3s;
      box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
      overflow: hidden;
      z-index: 100;
      
      .sidebar-header {
        height: 60px;
        display: flex;
        align-items: center;
        padding: 0 15px;
        box-sizing: border-box;
        border-bottom: 1px solid #435265;
        
        .logo {
          display: flex;
          align-items: center;
          gap: 10px;
          
          .logo-icon {
            font-size: 28px;
            color: #409eff;
          }
          
          .logo-text {
            font-size: 18px;
            font-weight: 600;
            color: white;
            white-space: nowrap;
          }
        }
        
        .logo-collapsed {
          .logo-icon {
            font-size: 24px;
            color: #409eff;
          }
        }
      }
      
      .sidebar-menu {
        border: none;
        height: calc(100% - 60px);
        
        :deep(.el-menu-item), 
        :deep(.el-sub-menu__title) {
          height: 50px;
          line-height: 50px;
          
          &:hover {
            background-color: #25354a !important;
          }
        }
        
        :deep(.el-menu-item.is-active) {
          background-color: #25354a !important;
        }
        
        .menu-icon {
          margin-right: 10px;
          font-size: 16px;
          vertical-align: middle;
        }
      }
    }
    
    // 头部样式
    .admin-header {
      background-color: white;
      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.12);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      z-index: 100;
      
      .header-left {
        display: flex;
        align-items: center;
        gap: 20px;
        
        .menu-toggle {
          border: none;
          background-color: #f0f2f5;
          
          .toggle-icon {
            font-size: 16px;
            color: #606266;
          }
        }
      }
      
      .header-right {
        display: flex;
        align-items: center;
        gap: 20px;
        
        .notification-badge {
          :deep(.el-badge__content) {
            border: none;
          }
        }
        
        .icon-button {
          font-size: 18px;
          color: #606266;
          padding: 0;
          
          &:hover {
            color: #409eff;
          }
        }
        
        .user-info {
          display: flex;
          align-items: center;
          gap: 10px;
          cursor: pointer;
          
          .user-avatar {
            background-color: #409eff;
            
            .avatar-icon {
              font-size: 18px;
              color: white;
            }
          }
          
          .user-name {
            color: #606266;
            font-size: 14px;
          }
        }
      }
    }
    
    // 标签页样式
    .tabs-container {
      background-color: white;
      padding: 0 20px;
      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.12);
      z-index: 90;
      
      .admin-tabs {
        :deep(.el-tabs__header) {
          margin: 0;
          
          .el-tabs__nav-wrap::after {
            height: 1px;
          }
          
          .el-tabs__item {
            height: 40px;
            line-height: 40px;
            padding: 0 20px;
            font-size: 14px;
            
            &.is-active {
              background-color: #f0f2f5;
              border-bottom-color: #f0f2f5;
            }
          }
        }
      }
    }
    
    // 主内容区样式
    .admin-main {
      background-color: #f0f2f5;
      padding: 20px;
      
      .main-content {
        height: 100%;
        
        .content-placeholder {
          height: 100%;
          
          .welcome-card {
            height: 100%;
            
            .welcome-header {
              text-align: center;
              margin-bottom: 30px;
              
              .welcome-icon {
                font-size: 48px;
                color: #409eff;
                margin-bottom: 15px;
              }
              
              h2 {
                color: #303133;
                margin: 0;
              }
            }
            
            .welcome-text {
              text-align: center;
              color: #909399;
              margin-bottom: 40px;
            }
            
            .stats-grid {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
              gap: 20px;
              
              .stat-card {
                border-radius: 8px;
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                
                .stat-content {
                  display: flex;
                  align-items: center;
                  gap: 15px;
                  
                  .stat-icon {
                    width: 50px;
                    height: 50px;
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    
                    &.bg-blue {
                      background-color: rgba(64, 158, 255, 0.1);
                      color: #409eff;
                    }
                    
                    &.bg-green {
                      background-color: rgba(103, 194, 58, 0.1);
                      color: #67c23a;
                    }
                    
                    &.bg-orange {
                      background-color: rgba(230, 162, 60, 0.1);
                      color: #e6a23c;
                    }
                    
                    &.bg-purple {
                      background-color: rgba(142, 113, 192, 0.1);
                      color: #8e71c0;
                    }
                    
                    .stat-icon-inner {
                      font-size: 24px;
                    }
                  }
                  
                  .stat-info {
                    .stat-number {
                      font-size: 24px;
                      font-weight: 600;
                      color: #303133;
                    }
                    
                    .stat-label {
                      font-size: 14px;
                      color: #909399;
                      margin-top: 5px;
                    }
                  }
                }
              }
            }
          }
        }
        
        .page-content {
          height: 100%;
          
          .page-card {
            height: 100%;
            
            .page-header {
              border-bottom: 1px solid #ebeef5;
              padding-bottom: 15px;
              margin-bottom: 20px;
              
              h3 {
                margin: 0;
                color: #303133;
              }
            }
            
            .page-body {
              p {
                color: #606266;
                line-height: 1.8;
              }
              
              .setting-form {
                max-width: 600px;
                margin-top: 20px;
                
                :deep(.el-form-item) {
                  margin-bottom: 20px;
                  
                  .el-form-item__label {
                    color: #606266;
                  }
                }
              }
            }
          }
        }
      }
    }
    
    // 底部样式
    .admin-footer {
      background-color: white;
      border-top: 1px solid #ebeef5;
      padding: 0;
      height: 50px;
      
      .footer-content {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        
        p {
          margin: 0;
          color: #909399;
          font-size: 12px;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .admin-layout {
    .admin-container {
      .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1000;
      }
    }
  }
}
</style>